<template>
	<view>
		<page-head headTitle="商品管理" rightWords="添加" :returnButton="true" @clickLeftReturn="clickLeftReturn" @onClickWords="onClickWords"></page-head>
			<view class="flex bg-white p-l-r3 p-t-b3 justify-between fixed fixed-top9">
				<view class="flex flex-1 m-r1 bg-search search-h justify-content align-center border-r">
					<text class="iconfont icon-biaoqing search-icon"></text>
					<input class="search-width" placeholder-class="input-goods fs-g search-width" type="text" placeholder="请输入商品名称">
				</view>
				<view class="flex search-h search-button justify-content align-center border-r">搜索</view>
			</view>
			<view class="m-t2">
				<view class="m bg-white" v-if="isShow">
					<view class="p-l-r2">
						<view class="flex height align-center fs-3 border-botton">
							<text class="flex-1 flex justify-content">商品名称</text>
							<text class="flex-1 flex justify-content">价格</text>
							<text class="flex-1 flex justify-content">库存</text>
							<text class="flex-1 flex justify-content">状态</text>
							<text class="flex-1 flex justify-content">操作</text>
						</view>
					</view>
					<view class="table">
						<view v-for="(item,index) in list" :key="item.id" class="flex search-h align-center p-l-r2 fs-2 color-table">
							<text class="flex-1 flex justify-content">{{item.name}}</text>
							<text class="flex-1 flex justify-content">{{item.price}}</text>
							<text class="flex-1 flex justify-content">{{item.stock}}</text>
							<text class="flex-1 flex justify-content" v-if="item.status==1">下架</text> 
							<text class="flex-1 flex justify-content" v-if="item.status==0">上架</text>
							<text class="flex-1 flex justify-content" v-if="item.status==2">售罄</text>
							<text class="flex-1 flex color-blue justify-content"><text  class="m-r1" @tap="goEdit" :data-id="item.id">编辑</text><text @tap="goodDelete" :data-id="item.id">删除</text></text>
						</view>
						<!-- <view class="flex search-h align-center p-l-r2 fs-2 color-table">
							<text class="flex-1 flex justify-content">代金卷</text>
							<text class="flex-1 flex justify-content">10</text>
							<text class="flex-1 flex justify-content">10</text>
							<text class="flex-1 flex justify-content">售罄</text>
							<text class="flex-1 flex justify-content color-blue"><text class="m-r1">编辑</text><text>删除</text></text>
						</view> -->
					</view>
				</view>
				<!-- 占位图 -->
				<view v-if="showIcon" class="flex justify-content flex-wrap goods-mt" >
					<image src="/static/images/order_none.png" class="order-icon">
				</view>	
				<view class="loading">{{loadingText}}</view>
			</view>	
		
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
	export default {
		components:{
			pageHead
		},
		data() {
			return {
				list:[],
				pages:1,
				isLast:0,
				onload:0,
				loadingText:'',
				showIcon:false,
				isShow:true
			}
		},
		onLoad() {
			this.getGoodsList();
		},
		onReachBottom() {
			if(this.onload !=1){ 
				this.getGoodsList(1); //下一页
			}
		},
		methods: {
			clickLeftReturn(){
				const pages = getCurrentPages() ;
				if(pages.length >1) {
					uni.navigateBack({
						delta: 1
					});
				}else{
					//返回上一页失败后强制回到首页
					uni.redirectTo({
						url: '../index/index'
					})
				}
			},
			//跳转去添加商品
			onClickWords(){
				uni.navigateTo({
				    url: '../add-goods/add-goods'
				});
			},
			//获取商品列表
			getGoodsList(next=0){
				if(this.isLast == 1){
					return false;
				}
			var page = this.pages;
			if(next == 1){
				page+=1;
				if(this.onload == 1){
					return false;
				}
				this.onload = 1;
				this.loadingText = '加载中...';
				uni.showNavigationBarLoading();
			}
			this.$myRequest({
					method:'POST',
					url:'/api/guide/goodslist',
					data:{
						page:this.pages,	
						page_size:10,
					}
				}).then(res=>{
				    console.log(res.data);
					if(res.data.code == 1){
						var result_list = res.data.data.data;
						if(result_list.length == 0){
							this.isShow = false;
						}
						//console.log(result_list);
						if(next == 1){
							//下一页
							if(result_list == ''){
								this.isLast = 1;
								
								uni.hideNavigationBarLoading();
								this.loadingText = '已加载全部';
							}else{
								this.list = this.list.concat(result_list);
								this.loadingText = '加载更多';
								this.pages = page;
								uni.hideNavigationBarLoading();
							}
							this.onload = 0;
							
						}else{
							//加载默认
							if(result_list == ''){
								//切换菜单栏，无订单时候显示占位图处
								this.isLast = 1;
								this.showIcon = true;
							}else{
								this.showIcon = false;
								this.list = result_list;
							}
										
						}
					}	
				});	
			},
			//跳去编辑页面
			goEdit(e){
				var orderId = e.currentTarget.dataset.id;
				console.log(e);
				uni.navigateTo({
					url: '../add-goods/add-goods?id='+orderId,
				});
			},
			//删除商品
			goodDelete(e){
				var orderId = e.currentTarget.dataset.id;
				//console.log(orderId);
				var _this = this;
				uni.showModal({
				    title: '提示',
				    content: '是否确认删除',
				    success: function (res) {
				        if (res.confirm) {
				            _this.$myRequest({
				            	method:'POST',
				            	url:'/api/guide/goodsdel',
				            	data:{id:orderId}
				            }).then(res=>{ 
				            	_this.getGoodsList();
				            });
				        } else if (res.cancel) {
				           // console.log('用户点击取消');
				        }
				    }
				});
				
			}
		}
		
	}
</script>

<style scoped>
.search-icon{font-size: 60rpx;color: #AAAAAA;}
.goods-mt{margin-top: 450rpx;}
</style>
